<template>
  <div class="camera-dialog">
    <div class="menu-block">
      <div :class="menuActive===1?'active':''" @click="menuActive=1" class="menu-item">南向北摄像头</div>
      <div :class="menuActive===2?'active':''" @click="menuActive=2" class="menu-item">北向南摄像头</div>
      <div :class="menuActive===3?'active':''" @click="menuActive=3" class="menu-item">东向西摄像头</div>
      <div :class="menuActive===4?'active':''" @click="menuActive=4" class="menu-item">西向东摄像头</div>
    </div>
    <div class="image-block">
      <img :src="imageUrl" alt="">
    </div>
  </div>
</template>
<script>
import {getRandomData} from "@/utils/utils";

export default {
  name: "CameraDialog",
  data() {
    return {
      menuActive: 1,
      randomImages:[
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/guangchang/jiankong/1.png",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/guangchang/jiankong/2.png",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/guangchang/jiankong/3.png",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/guangchang/jiankong/4.png",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/guangchang/jiankong/5.png",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/guangchang/jiankong/6.png",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/guangchang/jiankong/7.png",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/guangchang/jiankong/8.png",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/guangchang/jiankong/9.png",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/guangchang/jiankong/10.png",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/guangchang/jiankong/11.png",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/guangchang/jiankong/12.png",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/guangchang/jiankong/13.png",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/guangchang/jiankong/14.png",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/guangchang/jiankong/15.png",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/guangchang/jiankong/16.png",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/guangchang/jiankong/17.png",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/guangchang/jiankong/18.png",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/guangchang/jiankong/19.png",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/guangchang/jiankong/20.png",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/guangchang/jiankong/21.png",
        "https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/guangchang/jiankong/22.png"
      ],
      imageUrl:''
    }
  },
  watch:{
    menuActive:{
      immediate:true,
      handler(val){
        this.imageUrl=this.randomImages[getRandomData(this.randomImages.length-1,0,1)[0]]
      }
    }
  }
}
</script>
<style scoped lang="scss">
.camera-dialog {
  width: 330px;
  height: 200px;
  display: flex;
  padding: 15px 5px;
  display: flex;
  justify-content: space-between;
  .menu-block{
    width: calc(50% - 5px);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .menu-item{
      width: 100%;
      height: 30px;
      border-radius: 5px;
      display: flex;
      align-items: center;
      color: $fontColorMain;
      font-size: 14px;
      padding: 0 10px;
      background: rgba(34, 223, 233, 0.3);
      border: 1px solid rgba(0,0,0,0);
      cursor: pointer;
      &.active{
        border-color: $fontColorMain;
      }
    }
  }
  .image-block{
    width: calc(50% - 5px);
    height: 100%;
    img{
      width: 100%;
      height: 100%;
    }
  }
}
</style>
